<template>
    <div>
    <p-modal
    :title="title"
    :width="width"
    :visible="visible"
	v-if="visible"
	:footer="null"
    :confirmLoading="confirmLoading"
    @ok="visible=false"
    @cancel="visible=false"
    cancelText="关闭">
    <p-spin :spinning="confirmLoading">
      <p-form :form="form">
		  <div class="base-info">基本信息</div>
        <p-row>
		  <p-col  :span="8">
			<p-form-item label="任务编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{formInfo.scientificOrder}}
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol">
			{{formInfo.scientificPlease}}
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="部门名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-popover title="">
					<template slot="content">
					<span >{{formInfo.dptno}}</span>
					</template>
					<span class="dtName">{{formInfo.dptno}}</span>
				</p-popover>
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{formInfo.scientificContact}}
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{formInfo.scientificname}}
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="项目编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{formInfo.scientificno}}
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="加工类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{formInfo.scientificType==='1'?'单盘贴片外协加工':'厂内科研工单'}}
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="项目经理" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{formInfo.scientificManager}}
			</p-form-item>
		  </p-col>	  
		  <p-col  :span="8">
			<p-form-item label="加工说明" :labelCol="labelCol" :wrapperCol="wrapperCol">
			    {{formInfo.scientificInstructions}}
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="BOMreport" :labelCol="labelCol" :wrapperCol="wrapperCol">
			<span v-if="!formInfo.bomReport">暂无数据</span>
			<p-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(formInfo.bomReport)">
                下载
              </p-button>
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="科研bom表" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<span v-if="!formInfo.researchBom">暂无数据</span>
				<p-button
				v-else
				:ghost="true"
				type="primary"
				icon="download"
				size="small"
				@click="uploadFile(formInfo.researchBom)">
				下载
				</p-button>
			</p-form-item>
		  </p-col>
          
        </p-row>

        <div class="base-info">加工内容</div>
		<p-row>
		  <p-col  :span="8">
			<p-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
			{{formInfo.name}}
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="型号/图号" :labelCol="labelCol" :wrapperCol="wrapperCol">
	          {{formInfo.model}}
			</p-form-item>
		  </p-col>

		  <p-col  :span="8">
			<p-form-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{formInfo.quantity}}
			</p-form-item>
		  </p-col>

		  <p-col  :span="8">
			<p-form-item label="需求完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{ moment(formInfo.contentTime).format('YYYY-MM-DD')}}
			</p-form-item>
		  </p-col>

		  <p-col  :span="8">
			<p-form-item label="成本中心" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{formInfo.costCenter}}
			</p-form-item>
		  </p-col>

		  <p-col  :span="8">
			<p-form-item label="物料齐套时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
               {{ moment(formInfo.scientificQitime).format('YYYY-MM-DD')}}
			</p-form-item>
		  </p-col>

		  <p-col  :span="8">
			<p-form-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<span v-if="!formInfo.accessory">暂无数据</span>
				<p-button
				v-else
				:ghost="true"
				type="primary"
				icon="download"
				size="small"
				@click="uploadFile(formInfo.accessory)">
				下载
				</p-button>
			</p-form-item>
		  </p-col>
		  </p-row>

		   <div v-if="formInfo.scientificType==='1'&&
		   (formInfo.status==2||formInfo.status==3||formInfo.status==4||
		   formInfo.status==5||formInfo.status==-1)">
		      <div class="base-info">外协厂家范围</div>
              <div class="base-info-supplier">
				  {{supplierList || '暂无数据'}}
			  </div>
		   </div>

		  <div v-if="formInfo.scientificType==='1'&&
		  (formInfo.status==2||formInfo.status==4||formInfo.status==5||formInfo.status==-1)">
			<div class="base-info">采购评审</div>
			<p-row>
				<p-col :span="18">
				<div class="base-info-supplier">
					{{selectedSupplierList||'暂无数据'}}
				</div>
				</p-col>
			</p-row>
		  </div>
         <!-- 外协第三步 内厂第一步 -->
		  <div v-if="formInfo.scientificType==='1'&&formInfo.status==2">
			<div class="base-info" >工艺路线维护 <p style="float:right;"></p></div>
			<mes-mf-route-maintenance
			ref="modalRoute"
			@isHaveData="isHaveData" 
			v-if="isData"
			:scientificId="scientificId" 
			show="detailShow">
			</mes-mf-route-maintenance>
			<div v-else class="base-info-supplier">暂无数据</div>
		   </div>
		   <div v-if="formInfo.scientificType==='2'&&formInfo.status==2">
			<div class="base-info" >工艺路线维护 <p style="float:right;"></p></div>
			<mes-mf-route-maintenance
			ref="modalRoute"
			@isHaveData="isHaveData" 
			v-if="isData"
			:scientificId="scientificId" 
			show="detailShow">
			</mes-mf-route-maintenance>
			<div v-else class="base-info-supplier">暂无数据</div>
		   </div>

		<div v-if="formInfo.status == 6 || formInfo.status == -1">
		  <div class="base-info">事业部确认</div>
		  <p-row>
		  <p-col  :span="8">
			<p-form-item label="实际领用时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                 {{formInfo.actualStartTime || '--'}}
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="计划完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{formInfo.scientificCompleteTime || '--'}}
			</p-form-item>
		  </p-col>
		  <p-col  :span="8">
			<p-form-item label="实际完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
				{{formInfo.actualFinishTime || '--'}}
			</p-form-item>
		  </p-col>	
		  <p-col  :span="8">
			<p-form-item label="实际完成情况" :labelCol="labelCol" :wrapperCol="wrapperCol">
                 {{formInfo.actualCompletion || '--'}}
			</p-form-item>
		  </p-col>
		  </p-row>
		</div>
      </p-form>
    </p-spin>
  </p-modal>
      
    </div>
</template>

<script>
import moment from 'moment'
import MesMfRouteMaintenance from './MesMfRouteMaintenance'
import {getAction} from '@/api/manage';
import { mapState } from "vuex";
export default {
	components:{
		MesMfRouteMaintenance
	},
    data() {
        return {
		 moment,
		 confirmLoading:false,
		 scientificId:'',
         title:'详情',
		 width:1000,
		 info:{},
		 visible:false,
		 isData:true,
		 formInfo:{},
		 url:{
			 byId:'/mes-manufacture/mfScientific/'
		 },
         labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        };
    },
    created() {
    },
    mounted() {
      
	},
	watch:{
		scientificId(newVal){
		  this.scientificId = newVal
		},
	},
	computed:{
        supplierList(){
			if(this.formInfo.suggestDtoList){
				const supname =	this.formInfo.suggestDtoList.map(item=>item.supname).toString()
				return supname
			}
		},
		//采购评审绑定的供应商
		selectedSupplierList(){
			if(this.formInfo.suggestDtoList){
				const supname =	this.formInfo.suggestDtoList.filter(item=>item.checkid === this.userInfo.uid).map(i=>i.supname).toString()
				return supname
			}
		},
		...mapState({
          userInfo: state => state.user,
        }),
	},
    methods: {
      handleOk(){},
	  handleCancel(){},
	  isHaveData(data){
        if(data.length){
			this.isData = true
		}else{
			this.isData = false
		}
	  },
	  /* 文件下载 */
    uploadFile(text) {
      if (!text) {
        this.$message.warning('未知的文件')
        return
      }
      if (text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      window.open(text)
    },
      edit(record,a){
		this.visible = true;
		this.isData = true
		this.scientificId=record.id
		this.initData(record.id)
	  },
	  initData(id){
		  getAction(this.url.byId+id).then(res=>{
			  if(res.code === 0){
				this.formInfo = res.data || {}
				console.log(this.formInfo)
			  }
		  })
	  }
    }
};
</script>

<style scoped lang="less">
.base-info{
	width: 100%;
	background-color: #E8E8E8;
	padding:5px 10px;
	margin-bottom: 10px;
	
}
.base-info-supplier{
	margin-bottom: 10px;
}
.dtName{
		width: 200px;
		display: inline-block;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
</style>
